@import "../common/var";

// 字体基数，以分辨率1920为标准
$--base: 16px;

// 页面背景色
$--background: $blue-1;

// 页面前景色
$--color: $white;

// 主色和色阶
$--color-primary: $blue-5;
$--color-primary-light-1: $blue-1;
$--color-primary-light-2: $blue-2;
$--color-primary-light-3: $blue-3;
$--color-primary-light-4: $blue-4;
$--color-primary-light-5: $blue-5;
$--color-primary-light-6: $blue-6;
$--color-primary-light-7: $blue-7;
$--color-primary-light-8: $blue-8;
$--color-primary-light-9: $blue-9;
$--color-primary-light-10: $blue-10;

// 辅助色
$--color-success: $green-primary;
$--color-success-light: $green-9;
$--color-success-lighter: $green-10;

$--color-warning: $gold-primary;
$--color-warning-light: $gold-9;
$--color-warning-lighter: $gold-10;

$--color-danger: $red-primary;
$--color-danger-light: $red-9;
$--color-danger-lighter: $red-10;

$--color-info: $neutral-white-4;
$--color-info-light: $neutral-white-7;
$--color-info-lighter: $neutral-white-9;

// 中性色(浅色背景)
$--color-title: $neutral-white-1;
$--color-primary-text: $neutral-white-2;
$--color-normal-text: $neutral-white-3;
$--color-secondary-text: $neutral-white-4;
$--color-placeholder: $neutral-white-5;
$--color-border: $neutral-white-6;
$--color-divider: $neutral-white-6;
$--color-background: $neutral-white-7;
$--color-table-header: $neutral-black-5;
$--color-table-stripe: $neutral-black-6;


// 字体大小
$--font-size: 1rem;
$--font-size-extra-large: (30px/$--base) * $--font-size;
$--font-size-large: (24px/$--base) * $--font-size;
$--font-size-medium: (20px/$--base) * $--font-size;
$--font-size-normal: (18px/$--base) * $--font-size;
$--font-size-small: (14px/$--base) * $--font-size;
$--font-size-extra-small: 12px;

// 行高
$--line-height-normal: 1.5em;
$--line-height-large: 2em;
$--line-height-small: 1.3em;
$--line-height-none: 1em;


// 边距
$--padding-normal: 1rem;
$--padding-large: $--padding-normal * 1.5;
$--padding-small: $--padding-normal * 0.5;
$--padding-none: 0;

// 边框
$--border-base: 1px solid $--color-border;
$--border-dashed: 2px dashed $--color-border;

// 圆角
$--border-radius-large: 8px;
$--border-radius-base: 4px ;
$--border-radius-small: 2px;
$--border-radius-circle: 100%;
$--border-radius-none: 0;

// 阴影
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);


// 链接
$--link-color: $--color-primary;
$--link-hover-color: $--color-primary-light-3;

// 禁用
$--disabled-fill: $neutral-black-7;
$--disabled-color: $neutral-white-5;
$--disabled-border-color: $neutral-black-6;


// fix element --------------------------------
$--color-white: $--background;
$--color-text-primary: $--color-primary-text;
$--color-text-regular: $--color-secondary-text;
$--color-text-placeholder: $--color-placeholder;

$--background-color-base: $--color-background;

$--disabled-fill-base: $--disabled-fill;
$--disabled-color-base: $--disabled-color;
$--disabled-border-base: $--disabled-border-color;
$--checkbox-disabled-input-fill: $--disabled-fill;

$--border-color-base: $--color-border;
$--border-color-light: $--color-border;
$--border-color-lighter: $--color-border;
$--border-color-extra-light: $--color-border;

$--tooltip-fill: $--color-primary-light-3;
$--tooltip-border-color: $--tooltip-fill;
$--tooltip-color: $--color-primary-text;

$--datepicker-border-color: $--color-border;
$--datepicker-inner-border-color: $--color-border;
$--table-header-background-color: $--color-table-header;

$--cascader-tag-background: $--color-primary-light-3;

$--calendar-selected-background-color: $--color-background;

$--avatar-background-color: $--color-background;

.el-range-input {
  background: $--color-white;
}

.el-table__row--striped {
  td {
    background: $neutral-black-6 !important;
  }

  &.hover-row, &:hover {
    td {
      background-color: $--color-background !important;
    }
  }
}

.el-calendar {
  background: $--background;

  .el-calendar__title {
    color: $--color-title;
    font-size: $--font-size-medium;
  }
}
